<template>
    <div>
        <van-search shape="round" v-model="value" placeholder="请输入搜索关键词" />
        <!-- 热搜关键词 -->
        <div class="search_wrap">
            <p class="hot_title">热门搜索</p>
            <div class="hot_name_wrap">
                <span @click="fn(obj.first)" class="hot_item" v-for="(obj, index) in data.hotList" :key="index">{{ obj.first
                }}</span>
            </div>
        </div>
        <template v-if="loadingSate"></template>
        <van-loading v-else-if="data.SearchList.length == 0" type="spinner" size="24"
            style="margin: auto;width:90px; padding:50px;">加载中...</van-loading>
        <!-- 热搜结果展示 -->
        <div class="search_wrap" v-else>
            <p class="hot_title">搜索结果</p>
            <!-- van-list 懒加载 -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <song-item v-for="obj in data.SearchList" :key="obj.id" :name="obj.name" :author="obj.ar[0].name"
                    :id="obj.id"></song-item>
            </van-list>
        </div>
    </div>
</template>
  
<script>
import { hotSearchAPI, SearchListAPI } from '@/api'
import { ref, onMounted, reactive, watch } from 'vue'
import SongItem from '@/components/SongItem.vue'
export default {
    components: {
        SongItem
    },
    setup() {
        let value = ref('');
        let loading = ref(false)
        let finished = ref(false)
        let timer = ref(null)//定时器
        let page = ref(1)//页码
        let loadingSate = ref(true) //loadingSate初始状态
        const data = reactive({
            hotList: [],
            SearchList: []
        })
        //初始加载热门搜索词
        onMounted(async () => {
            const hotRes = await hotSearchAPI()
            data.hotList = hotRes.data.result.hots
        })
        //实现搜索
        const SearchList = async () => {
            const res = await SearchListAPI({
                keywords: value.value,
                limit: 20,
                offset: page.value - 1
            })
            return res
        }
        //点击热门搜索 显示到input框中
        const fn = async (val) => {
            loadingSate.value = false
            data.SearchList = []
            page.value = 1//页码回到1
            value.value = val
            loading.value = true
            finished.value = false
        }
        //watch监听input的变化
        watch(value, (newV, oldV) => {
            if (!value.value.trim() == '') {
                if (timer) {//防抖优化
                    clearTimeout(timer)
                    timer = setTimeout(async () => {
                        loadingSate.value = false
                        page.value = 1//页码回到1
                        value.value = newV
                        loading.value = true
                        const res = await SearchList()
                        if (res.data.result.songs == undefined) {
                            data.SearchList = []
                            finished.value = true
                            return
                        }
                        data.SearchList = res.data.result.songs
                        loading.value = false
                    }, 600)
                }
            } else {
                loadingSate.value = true
                data.SearchList = []
            }
        })
        //触底事件 懒加载
        const onLoad = async () => {
            page.value++
            const res = await SearchList()
            if (res.data.result.songs === undefined) {
                finished.value = true
                return
            }
            data.SearchList = [...data.SearchList, ...res.data.result.songs]
            loading.value = false
        }
        return { value, data, fn, onLoad, loading, finished, loadingSate };
    },
};
</script>
  
<style scoped>
/* 搜索容器的样式 */
.search_wrap {
    padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
    font-size: 0.32rem;
    color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
    margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
    display: inline-block;
    height: 0.853333rem;
    margin-right: 0.213333rem;
    margin-bottom: 0.213333rem;
    padding: 0 0.373333rem;
    font-size: 0.373333rem;
    line-height: 0.853333rem;
    color: #333;
    border-color: #d3d4da;
    border-radius: 0.853333rem;
    border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
    border-bottom: 1px solid lightgray;
}
</style>
  